Vue.component("mymain", {
    data(){
        return {
            user:null,
            category:null,
            qrcodeVisible:false,
        };
    },
    template:`
<div>
    <login ref="lg" @logined="onlogin"></login>
    <header class="header">
        <nav class="navbar navbar-default" id="navbar">
            <div class="container">
                <div class="header-topbar hidden-xs link-border">
                    <ul class="site-nav topmenu">
                         <li><a href="tags.html">标签云</a></li>
                         <li><a href="readers.html" rel="nofollow">读者墙</a></li>
                         <li><a href="links.html" rel="nofollow">友情链接</a></li>
                         <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关注本站 <span class="caret"></span></a>
                             <ul class="dropdown-menu header-topbar-dropdown-menu">
                                  <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
                                  <li><a href="#" rel="nofollow"><i class="fa fa-weibo"></i> 微博</a></li>
                                  <li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i class="fa fa-rss"></i> RSS</a></li>
                             </ul>
                         </li>
                     </ul>
                    <span v-if="user">
                        欢迎 {{user.name}}
                        <a href="" @click.prevent="showPwdWin">修改密码</a>
                        <a href="artileEdit.html">发布文章</a>&nbsp;&nbsp;
                        <a href="" @click.prevet="logout">退出</a>
                    </span>
                    <spen v-else>
                        <a href="" @click.prevent="showLoginWin">Hi,请登录</a>
                        <a href="" class="register" @click.prevent="openQrcode">扫码登陆</a>&nbsp;&nbsp;
                        <a href="" class="register" @click.prevent="showRegWin">我要注册</a>&nbsp;&nbsp;
                        <a href="" @click.prevent="showForgetWin">找回密码</a>
                    </spen>
                </div>
               <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                 <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt="" ></a></h1>
               </div>
               
<!--               网站标签页-->
               <div class="collapse navbar-collapse" id="header-navbar">
                 <ul class="nav navbar-nav navbar-right" >
                  <li class="hidden-index active"><a data-cont="异清轩首页" href="index.html">异清轩首页</a></li>
                  <ul class="nav navbar-nav navbar-right" 
                        v-for="c in category">
                    <li>
                        <a :href="'category.html?id=' + c.id"  >{{c.name}}</a>
                    </li>
                  </ul>
                 </ul>
                 <form class="navbar-form visible-xs" action="/Search" method="post">
                    <div class="input-group">
                     <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
                     <span class="input-group-btn">
                     <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
                    </div>
                 </form>
               </div>
            </div>
         </nav>
    </header>
    <section class="container">
        <slot></slot>
    </section>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2016 <a href="">ylsat.com</a> &nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank"
                                                              rel="nofollow">豫ICP备20151109-1</a> &nbsp; <a
                    href="sitemap.xml" target="_blank" class="sitemap">网站地图</a></p>
        </div>
        <div id="gotop"><a class="gotop"></a></div>
    </footer>
    
    <el-dialog
     title="扫码登陆"
     :visible.sync="qrcodeVisible"
     width="30%">
     <img src="http://192.168.137.1:8080/sendQrcode">
     <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="qrcodeVisible = false">关闭</el-button>
     </span>
    </el-dialog>

</div>    
    `,
    methods:{
        showCategory(){
          axios.post("/blog/category/getCategory").then(res=>{
              if (res.data.code){
                  this.category = res.data.data;
                  this.$emit("category", this.category);
              }
          })
        },
        showLoginWin() {
            this.$refs.lg.openLoginWin();
        },
        onlogin(user) {
            this.user = user;
            this.$emit("logined", user);
        },
        logout() {
            this.$refs.lg.logout();
        },
        showPwdWin() {
            this.$refs.lg.openPwdWin();
        },
        showForgetWin() {
            this.$refs.lg.openForgetWin();
        },


        openQrcode() {
            if (!document.cookie.includes("uid=")){
                this.$alert("扫描登陆前必须先使用账号密码登陆一次本系统!")
                return;
            }

            this.qrcodeVisible = true;

            let handle = setInterval(() => {
                axios.get("http://192.168.137.1:8080/lookUuid").then(res=>{
                    if (res.data.code){
                        axios.get("http://192.168.137.1:8080/loginByUUID").then(res=>{
                            //提示信息
                            this.$message.success(res.data.msg);
                            //关闭窗口
                            this.qrcodeVisible = false;
                            //结束轮询
                            clearInterval(handle);
                            //设置用户对象
                            this.user = res.data.data;
                        })
                    }
                })
            },1000);


        },

    },
    created() {
        this.showCategory();
    }
})